<template>
  <div ref="getheight" class="wrap">
    <el-container>
      <el-main>
        <div class="table-wrap">
          <div class="handle-box3">
            <el-form :inline="true" ref="form" :model="searchForm" class="demo-form-inline">
              <div class="uers-left">
                <el-form-item label="搜索：">
                  <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label>
                  <el-input v-model="searchForm.remark" placeholder="备注"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                  <el-select v-model="searchForm.type" placeholder="类型" @change="selectType">
                    <el-option label="增" value="1"></el-option>
                    <el-option label="删" value="2"></el-option>
                    <el-option label="改" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchSubmit()">搜索</el-button>
              </div>
            </el-form>
          </div>
          <div class="tabbox">
          <el-table
            :data="dataList"
            height="100%"
            border
            class="tabbox"
            ref="multipleTable"
            :header-cell-style="{background:'#f2f6fc',color:'#606266'}"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Project_Id" label="项目" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.Project_Id}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.remark}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.type==1?'增':(scope.row.type==2?'删':'改')}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Data_Table" label="数据表" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.Data_Table}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Data_Id" label="操作数据ID" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.Data_Id}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="CreateDate" label="创建时间" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.CreateDate}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table></div>
          <div class="fb"><el-pagination
            class="pag"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination></div>
        </div>
        <DeleteDialog
          :delVisible="delVisible"
          @deleteData="deleteData"
          @handleCloseVisible="handleCloseVisible"
        ></DeleteDialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import DeleteDialog from "../../components/public/DeleteConfim";

export default {
  data() {
    return {
      total: 0, //总条数
      currentPage: 1, //初始页
      pagesize: 10, // 每页的数据
      searchForm: {
        name: "",
        remark: "",
        type: ''
      },
      dataList: [],
      multipleSelection: [],
      productId: "",
      delVisible: false
    };
  },
  created() {
    this.getData();

    var product_id = localStorage.getItem("project_Id");
    this.productId = product_id;
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.getData();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.getData();
    },
    searchSubmit() {
      this.search = {
        name: this.searchForm.name,
        pageIndex: this.currentPage - 1,
        pageSize: this.pagesize,
        projectId: this.productId,
        remark: this.searchForm.remark,
        type: this.searchForm.type
      };
      this.$axios.post("/AccountLog/Search", this.search).then(res => {
        if (res.data.hasError == false) {
          this.dataList = [...res.data.data];
          this.total = res.data.total;;
        }
      });
    },
    deleteData() {
      if (this.accountLog_Id != "") {
        this.$axios.delete(`/AccountLog/${this.accountLog_Id}`).then(res => {
          if (res.data.hasError == false) {
            this.$message.success("删除成功！");
            this.getDataSearch();
          } else {
            this.$message.error("删除失败！");
          }
        });
        this.delVisible = false;
      }
    },
    handleDelete(index, row) {
      this.accountLog_Id = row.accountLogId;
      this.delVisible = true;
    },
    handleCloseVisible() {
      this.accountLog_Id = "";
      this.delVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 获取数据
    getData() {
      this.$axios.get("/AccountLog/").then(res => {
        if (res.data.hasError == false) {
          this.dataList = [...res.data.data];
          this.total = res.data.total;;
        }
      });
    },
    selectType(value) {
      this.searchForm.type = value;
    }
  },
  components: {
    DeleteDialog
  }
};
</script>
<style lang="scss" scope>
.wrap {
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 5px;
  position: relative;
  height: 100%;
  background: #fff;
  .pag {
    position: absolute;
    bottom: 10px;
  }
  .table-wrap {
    padding-top: 20px;
    height: calc(100% - 150px);
  }
}
.uers-left {
  float: left;
}
.uers-right {
  float: right;
}
</style>